<template>
  <div class="controls-box" v-if="menuFlag">
    <!-- tab 切换 -->
    <el-tabs v-model="activeMenu" type="card" @tab-click="handleMenuClick">
      <el-tab-pane label="文字" name="first">
        <!-- 文字区域 -->
        <div class="controlos-text">
          <div class="variable">
            <div class="controlos-text_fontnum">
              <span class="common-title">字体字号</span>
              <el-row :gutter="8" class="m-top">
                <el-col :span="12">
                  <el-select v-model="fontFamily" placeholder="请选择">
                    <el-option
                      v-for="item in fontFamilyOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option> </el-select
                ></el-col>
                <el-col :span="12"
                  ><el-select v-model="fontSize" placeholder="请选择">
                    <el-option
                      v-for="item in fontSizeOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option> </el-select
                ></el-col>
              </el-row>
            </div>
            <!-- 字体样式 -->
            <div class="controlos-text_fontnum m-top">
              <span class="common-title">样式</span>
              <div class="controlos-fontstyle m-top">
                <checkBox @getActiveNum="getActiveNum"> </checkBox>
                <!-- <el-checkbox-group
                v-model="fontStyle"
                fill="#e8ebee"
                text-color="#3d4757"
              >
                <el-checkbox-button
                  v-for="city in fontstyleOptions"
                  :label="city"
                  :key="city"
                  >{{ city }}</el-checkbox-button
                >
              </el-checkbox-group> -->
              </div>
            </div>
            <!-- 颜色 -->
            <div class="controlos-text_fontnum m-top">
              <span class="common-title">颜色</span>
              <div class="controlos-fontstyle m-top">
                <el-row :gutter="10">
                  <el-col :span="12"
                    ><div class="grid-content bg-purple">
                      <span class="grid-content-span">字体颜色:</span>
                      <color-picker
                        :value="fontColor"
                        @input="fontInput"
                      ></color-picker>
                      <!-- <el-color-picker
                        v-model="fontColor"
                        show-alpha
                        :predefine="predefineColors"
                      >
                      </el-color-picker> -->
                    </div></el-col
                  >
                  <el-col :span="12"
                    ><div class="grid-content bg-purple">
                      <span class="grid-content-span">填充颜色:</span>
                      <color-picker
                        :value="fillColor"
                        @input="fillInput"
                      ></color-picker>
                      <!-- <el-color-picker
                        v-model="fillColor"
                        show-alpha
                        :predefine="predefineColors"
                      >
                      </el-color-picker> -->
                    </div></el-col
                  >
                </el-row>

                <!-- <colorPicker v-model="fontColor"></colorPicker> -->
              </div>
            </div>
            <!-- 字符间距 -->
            <div class="controlos-text_fontnum m-top">
              <span class="common-title">字符间距</span>
              <div class="controlos-fontstyle m-top">
                <el-radio-group
                  v-model="fontSpace"
                  fill="#e2e6ed"
                  text-color="#3d4757"
                >
                  <el-radio-button
                    v-for="(item, index) in fontSpaceOptions"
                    :key="index"
                    :label="item"
                  ></el-radio-button>
                </el-radio-group>
                <div class="controlos-fontstyle_step m-top">
                  <el-input-number
                    v-model="fontSpaceNum"
                    controls-position="right"
                    @change="fontSpaceChange"
                    :min="0"
                    :precision="2"
                    :step="0.01"
                    size="mini"
                  ></el-input-number>
                  <span class="controlos-fontstyle_span">厘米</span>
                </div>
                <!-- <colorPicker v-model="fontColor"></colorPicker> -->
              </div>
            </div>
          </div>

          <!-- 套用样式 -->
          <div class="controlos-text_fontnum m-top apply-bottom">
            <span class="common-title">套用样式</span>
            <div class="controlos-fontstyle m-top">
              <!-- <colorPicker v-model="fontColor"></colorPicker> -->
              <el-select v-model="applyItem" placeholder="请选择">
                <el-option
                  v-for="item in applyOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
              <el-row :gutter="20" class="m-top">
                <el-col :span="12"
                  ><div class="grid-content bg-purple">
                    <el-button plain>保存样式</el-button>
                  </div></el-col
                >
                <el-col :span="12"
                  ><div class="grid-content bg-purple">
                    <el-button plain>还原样式</el-button>
                  </div></el-col
                >
              </el-row>
            </div>
          </div>
        </div>
      </el-tab-pane>

      <el-tab-pane label="段落" name="fourth">
        <div class="controlos-text">
          <!-- 字体样式 -->

          <div class="varible">
            <div class="controlos-text_fontnum m-top">
              <span class="common-title">对齐</span>
              <div class="controlos-fontstyle m-top">
                <el-radio-group
                  v-model="alignment"
                  fill="#e2e6ed"
                  text-color="#3d4757"
                >
                  <el-radio-button
                    v-for="(item, index) in alignmentOptions"
                    :label="item"
                    :key="index"
                  ></el-radio-button>
                </el-radio-group>
              </div>
            </div>
            <!-- 颜色 -->
            <div class="controlos-text_fontnum m-top">
              <span class="common-title">缩进</span>
              <div class="controlos-fontstyle m-top">
                <!-- 首行缩进 -->
                <div class="controlos-fontstyle_box">
                  <span class="controlos-fontstyle_span">首行缩进</span>&nbsp;
                  <el-input-number
                    v-model="firstLine"
                    controls-position="right"
                    @change="firstChange"
                    :min="0"
                    :precision="2"
                    :step="0.05"
                    size="mini"
                  ></el-input-number>
                  &nbsp;
                  <span class="controlos-fontstyle_span">字符</span>
                </div>

                <br />
                <!-- 文本之前 -->
                <div class="controlos-fontstyle_box">
                  <span class="controlos-fontstyle_span">文本之前</span>&nbsp;
                  <el-input-number
                    v-model="textBefore"
                    controls-position="right"
                    @change="firstChange"
                    :min="0"
                    :precision="2"
                    :step="0.05"
                    size="mini"
                  ></el-input-number>
                  &nbsp;
                  <span class="controlos-fontstyle_span">字符</span>
                </div>

                <br />
                <!-- 文本之后 -->
                <div class="controlos-fontstyle_span">
                  <span class="controlos-fontstyle_span">文本之后</span>&nbsp;
                  <el-input-number
                    v-model="textAfter"
                    controls-position="right"
                    @change="firstChange"
                    :min="0"
                    :precision="2"
                    :step="0.05"
                    size="mini"
                  ></el-input-number>
                  &nbsp;
                  <span class="controlos-fontstyle_span">字符</span>
                </div>
              </div>
            </div>
            <!-- 字符间距 -->
            <div class="controlos-text_fontnum m-top">
              <span class="common-title">间距</span>
              <div class="controlos-fontstyle m-top">
                <div class="controlos-rowledge">
                  <el-row :gutter="10">
                    <el-col :span="6"
                      ><div class="grid-content bg-purple">
                        <span>行距</span>
                      </div></el-col
                    >
                    <el-col :span="9"
                      ><div class="grid-content bg-purple">
                        <el-select
                          v-model="rowledge"
                          placeholder="请选择行距"
                          size="mini"
                        >
                          <el-option
                            v-for="item in rowledgeOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                          >
                          </el-option>
                        </el-select></div
                    ></el-col>
                    <el-col :span="9"
                      ><div class="grid-content bg-purple">
                        <el-input-number
                          size="mini"
                          v-model="rowledgeNum"
                          controls-position="right"
                          :step="0.5"
                          @change="rowledgeChange"
                          :min="1"
                        ></el-input-number></div
                    ></el-col>
                  </el-row>
                  <br />
                  <el-row :gutter="10">
                    <el-col :span="7"><span>段与段间距</span></el-col>
                    <el-col :span="10">
                      <el-input-number
                        v-model="paragraphsNum"
                        controls-position="right"
                        @change="handleChange"
                        :min="0"
                        :step="0.5"
                        size="mini"
                      ></el-input-number>
                    </el-col>
                    <el-col :span="7"> <span>行</span></el-col>
                  </el-row>
                </div>
                <!-- <colorPicker v-model="fontColor"></colorPicker> -->
              </div>
            </div>
            <!-- 安全限制 -->
            <div class="controlos-text_fontnum m-top">
              <span class="common-title">安全限制</span>
              <div class="controlos-fontstyle m-top">
                <div class="controlos-safety">
                  {{ safety }}
                </div>
                <!-- <colorPicker v-model="fontColor"></colorPicker> -->
              </div>
            </div>
            <!-- 留痕信息 -->
            <div class="controlos-text_fontnum m-top">
              <span class="common-title">留痕信息</span>
              <div class="controlos-fontstyle m-top">
                <div>
                  <span>创建人:</span> <span>{{ userInfo.createName }}</span>
                </div>
                <div>
                  <span>修改人:</span><span>{{ userInfo.setName }}</span>
                </div>
                <!-- <colorPicker v-model="fontColor"></colorPicker> -->
              </div>
            </div>
          </div>

          <!-- 套用样式 -->
          <div class="controlos-text_fontnum m-top apply-bottom">
            <span class="common-title">套用样式</span>
            <div class="controlos-fontstyle m-top">
              <!-- <colorPicker v-model="fontColor"></colorPicker> -->
              <el-select v-model="applyItem" placeholder="请选择">
                <el-option
                  v-for="item in applyOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
              <el-row :gutter="20" class="m-top">
                <el-col :span="12"
                  ><div class="grid-content bg-purple">
                    <el-button plain>保存样式</el-button>
                  </div></el-col
                >
                <el-col :span="12"
                  ><div class="grid-content bg-purple">
                    <el-button plain>还原样式</el-button>
                  </div></el-col
                >
              </el-row>
            </div>
          </div>
        </div>
      </el-tab-pane>

      <!-- <el-tab-pane name="remove">
        <template #label>
          <span><i class="el-icon-error" @click="removeMenu"></i> </span>
        </template>
      </el-tab-pane> -->
    </el-tabs>
    <i
      class="el-icon-close menu-right_close"
      type="text"
      @click="removeMenu"
    ></i>
  </div>
</template>

<script>
// import { VueColorpicker } from "vue-pop-colorpicker";
import colorPicker from "../../components/color/color-picker";
import checkBox from "../checkBox/checkBox";
export default {
  components: {
    colorPicker,
    checkBox,
    // colorPicker: VueColorpicker,
  },
  data() {
    return {
      activeMenu: "first",
      menuFlag: true,
      // 字体风格
      fontFamily: "宋体",
      fontFamilyOptions: [
        {
          value: "宋体",
          label: "宋体",
        },
        {
          value: "微软雅黑",
          label: "微软雅黑",
        },
        {
          value: "楷体",
          label: "楷体",
        },
      ],
      // 字体大小
      fontSize: "四号",
      fontSizeOptions: [
        {
          value: "一号",
          label: "一号",
        },
        {
          value: "二号",
          label: "二号",
        },
        {
          value: "三号",
          label: "三号",
        },
        {
          value: "四号",
          label: "四号",
        },
      ],
      // 字体样式
      fontstyleOptions: ["粗体", "斜体", "下划线", "中划线"],
      fontStyle: [],
      // 字体颜色
      fontColor: "rgba(255, 69, 0, 0.68)",
      // 填充颜色
      fillColor: "rgba(255, 69, 0, 0.68)",
      // 字符间距
      fontSpace: "",
      fontSpaceOptions: ["紧缩", "标准", "加宽"],
      fontSpaceNum: 0,
      // 套用样式
      // 字体大小
      applyItem: "无",
      applyOptions: [
        {
          value: "无",
          label: "无",
        },
        {
          value: "样式一",
          label: "样式一",
        },
        {
          value: "样式二",
          label: "样式二",
        },
      ],
      // 对齐方式
      alignment: "向右对齐",
      alignmentOptions: ["向右对齐", "向左对齐", "居中对齐", "均分对齐"],
      // 首行缩进
      firstLine: 0,
      // 文本之前
      textBefore: 0,
      // 文本之后
      textAfter: 0,
      // 行距选择
      rowledge: 1,
      rowledgeOptions: [
        {
          value: 1,
          label: "单倍行距",
        },
        {
          value: 1.5,
          label: "1.5倍行距",
        },
        {
          value: 2,
          label: "2倍行距",
        },
        {
          value: 3,
          label: "多倍行距",
        },
      ],
      rowledgeNum: 1,
      // 段落间距
      paragraphsNum: 0,

      // 安全限制
      safety: "无法编辑",

      // 留痕信息
      userInfo: {
        createName: "XXX",
        setName: "AAA",
      },
      // 默认颜色
      predefineColors: [
        "#ff4500",
        "#ff8c00",
        "#ffd700",
        "#90ee90",
        "#00ced1",
        "#1e90ff",
        "#c71585",
      ],
    };
  },
  methods: {
    handleMenuClick(tab, event) {
      console.log(tab, event);
    },
    removeMenu() {
      this.menuFlag = false;
        this.$parent.$refs.controls.style.display="none"
      this.$parent.$refs.menu.children.length == 1
        ? (this.$parent.$refs.section.style.cssText =
            "grid-template-columns: 2fr 8fr")
        : (this.$parent.$refs.section.style.cssText =
            "grid-template-columns:8fr");
    },
    fontSpaceChange(num) {
      console.log(num);
    },
    // 首航缩进
    firstChange(num) {
      console.log(num);
    },
    // 行距
    rowledgeChange(num) {
      if (num < 2.5) {
        this.rowledge = num;
      } else {
        this.rowledge = 3;
      }
    },
    // 接受 checkbox的值
    getActiveNum(val) {
      this.fontStyle = val;
      console.log(this.fontStyle);
    },
    fontInput(value) {
      // console.log();
      if (typeof value == "string") {
        this.fontColor = value;
      } else {
        this.fontColor = value.target.value;
      }
    },
    fillInput(value) {
      if (typeof value == "string") {
        this.fillColor = value;
      } else {
        this.fillColor = value.target.value;
      }
    },
  },
  watch: {
    rowledge(newVal) {
      console.log(newVal);
      this.rowledgeNum = newVal;
    },
  },
};
</script>

<style lang="scss">
.controls-box {
  width: 100%;
  height: calc(100vh - 110px);
  border: 1px solid #e7e9eb;
  box-sizing: border-box;
  position: relative;
  .controlos-text {
    // position: relative;
    padding: 6px 20px;
    // overflow-y: auto;
    display: flex;
    // flex-direction: column;
    flex-flow: row wrap;
    height: 100%;
    // height: 100%;
    // .apply-bottom {
    //   position: absolute;
    //   bottom: 0;
    // }
  }
  .grid-content {
    display: flex;
    align-items: center;
    // justify-content: center;
    .grid-content-span {
      line-height: 30px;
      margin-right: 5px;
      color: #606266;
    }
  }
  .controlos-fontstyle_span {
    color: #3d4757;
    font-size: 14px;
    margin-left: 3px;
  }
  .controlos-fontstyle_span {
    margin-top: 5px;
  }
  .menu-right_close {
    position: absolute;
    top: 9px;
    right: 11px;
    cursor: pointer;
    color: #606266;
  }
  .controlos-text_fontnum {
    width: 100%;
  }

  // background-color: red;
}
.varible {
  width: 100%;
  height: 100px;
  align-self: flex-start;
}
.m-top {
  margin-top: 10px;
}
.el-checkbox-group {
  display: flex;
}
.el-radio-group {
  font-size: 0;
  display: flex;
}
.common-title {
  font-size: 16px;
  font-weight: bold;
}
.apply-bottom {
  align-self: flex-end;
  margin-bottom: 10px;
}
.el-tabs__content {
  height: 100%;
  overflow: visible;
}

.el-tab-pane {
  // background: red;
  height: 100%;
  // height: 100vh;
}
.el-tabs {
  // height: 100%;
  height: calc(100vh - 230px);
}
</style>
